<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>源码字节</title>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
    <link rel="icon" th:href="@{/static/favicon.ico}"/>
    <link th:href="@{/static/css/bootstrap.min.css}" id="bootstrap-style" rel="stylesheet" type="text/css">
    <link th:href="@{/static/css/icons.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/css/app.min.css}" id="app-style" rel="stylesheet" type="text/css">
</head>
<style>
    body {
        caret-color: transparent;
    }

    iframe {
        caret-color: transparent;
    }

</style>
<body>
<div id="app">
    <template>
        <el-container class="index-container">
            <el-header class="index-header">
                <div class="" style="text-align: center;width: 200px;font-weight: bold;font-size: 20px">
                    {{systemName}}
                </div>

                <div class="index-userInfo">
                    <button type="button" class="btn header-item noti-icon waves-effect"
                            id="page-header-notifications-dropdown"
                            data-bs-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                            @click="mineNotifyList"
                    >
                        <i class="ti-bell" style="color: white;"></i>
                        <span class="badge bg-danger rounded-pill">{{unReadNum}}</span>
                    </button>
                    <button type="button" class="btn header-item noti-icon waves-effect" data-toggle="fullscreen">
                        <i class="mdi mdi-fullscreen font-size-24" style="color: white;"></i>
                    </button>

                    <el-avatar icon="el-icon-user-solid" size="medium" :src="avatar"
                               style="margin-right: 10px;cursor: pointer" ></el-avatar>

                    <span style="margin-right: 10px;cursor: pointer" >{{sysUser.realName}}</span>

                    <el-dropdown trigger="click" @command="handleCommand" style="margin-right: 10px; cursor: pointer">

                        <i class="el-icon-caret-bottom" style="color: white;font-size: 14px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="updateData">个人资料</el-dropdown-item>
                            <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </el-header>

            <el-container>

                <el-aside width="200px" class="index-aside"
                          style="overflow-x: hidden; overflow-y: scroll;height: 120vh">
                    <div v-show="showAvatar">
                        <div style="width: 100%;font-size: 13px;text-align: center;margin-top: 10px;margin-bottom: 20px">
                            <img :src="avatar" style="width: 100px;height: 100px;border-radius: 50px;" class="rotate-image"
                                 alt="">
                            <div style="margin-top: 10px">你好！{{sysUser.realName}}，欢迎登录</div>
                            <div style="margin-top: 10px">{{currentTime}}</div>

                        </div>

                        <el-input
                                placeholder="请输入菜单名称"
                                @change="filteredMenu()"
                                class="custom-input"
                                suffix-icon="el-icon-search"
                                v-model="searchText">
                        </el-input>
                    </div>


                    <el-menu unique-opened background-color="var(--menuBackground)" text-color="var(--menuTextColor)" active-text-color="#ffffff"
                             :default-active="activePath" style="width: 200px;overflow: hidden;height: 120vh">
                        <template v-for="(item,index) in sysMenu">
                            <el-submenu :key="index" :index="index+''">
                                <template slot="title"><i :class="item.icon"></i>{{item.menuName}}</template>
                                <el-menu-item v-for="child in item.children" :index="child.url"
                                              @click="addTab(child.menuName, child.url)">
                                    <template slot-scope="scope"><i :class="child.icon"></i>{{child.menuName}}
                                    </template>
                                </el-menu-item>
                            </el-submenu>
                        </template>
                    </el-menu>
                </el-aside>

                <el-main v-loading="loading" style="height: 90vh">
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"
                             @tab-click="clickTab" style="height: 100%;">
                        <el-tab-pane :key="item.name" v-for="(item) in editableTabs" :label="item.title"
                                     :name="item.name" style="height: 100%;">
                            <iframe :src="item.content" style="height: 100%;width: 100%;border: none;"></iframe>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>

            </el-container>
        </el-container>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/login.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>

<!-- JAVASCRIPT -->
<script th:src="@{/static/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/static/js/metisMenu.min.js}"></script>
<script th:src="@{/static/js/simplebar.min.js}"></script>
<script th:src="@{/static/js/waves.min.js}"></script>
<script th:src="@{/static/js/jquery.sparkline.min.js}"></script>

<!--Morris Chart-->
<script th:src="@{/static/js/morris.min.js}"></script>
<script th:src="@{/static/js/raphael.min.js}"></script>

<script th:src="@{/static/js/dashboard.init.js}"></script>

<script th:src="@{/static/js/app.js}"></script>

<style>

    .custom-input .el-input__inner {
        background-color: var(--menuBackground); /* 自定义背景颜色 */
    }

    body {
        height: 100vh;
        overflow: hidden;
    }

    /* 滚动条 */
    ::-webkit-scrollbar {
        width: 0px;
        height: 100px;
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

    /* 滚动条拖动手柄 */
    ::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 6px;
    }

    /* 鼠标悬停在滚动条上时的样式 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

    /* 滚动条 */
    el-main ::-webkit-scrollbar {
        width: 0px;
        height: 100px;
    }

    /* 滚动条轨道 */
    el-main ::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

    /* 滚动条拖动手柄 */
    el-main ::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 6px;
    }

    /* 鼠标悬停在滚动条上时的样式 */
    el-main ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

    /*//显示时按钮样式*/
    .el-button--primary {
    / / 需要更改的按钮类型 background: var(--baseBackground) !important;
        border-color: var(--baseBackground) !important;
    }

    /*//移入时按钮样式*/
    .el-button--primary:hover {
        background: var(--baseBackground) !important;
        border-color: var(--baseBackground) !important;
        color: #FFF !important;
    }

    .el-menu-item.is-active {
        background-color: var(--baseBackground) !important;
    }

    .el-tabs__item {
        padding: 0 5px;
        height: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 30px;
        display: inline-block;
        list-style: none;
        font-size: 13px;
        font-weight: 500;
        color: #303133;
        position: relative;
    }

    .el-tabs--card > .el-tabs__header {
        border-bottom: 1px solid #E4E7ED;
        background-color: #ffffff;
    }

    .el-tabs__item.is-active {
        color: #ffffff;
        background-color: var(--baseBackground);
    }

    .el-tabs__item:hover {
        color: black;
        cursor: pointer;
    }

    .index-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .index-header {
        background-color: var(--headerBackground);
        color: #ffffff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: content-box;
        padding: 0px;
    }

    .index-aside {
        background-color: var(--menuBackground);
    }

    .index-title {
        color: #fff;
        font-size: 22px;
        display: inline;
        margin-left: 10px;

    }

    .index-userInfo {
        font-size: 14px;
        display: flex;
        align-items: center
    }

    .el-submenu .el-menu-item {
        width: 199px;
        min-width: 175px;
    }

    .rotate-image {
        animation: rotate 5s linear infinite; /* 使用 rotate 动画，持续时间为 5 秒，线性变化，无限循环 */
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg); /* 初始状态，无旋转 */
        }

        100% {
            transform: rotate(360deg); /* 最终状态，完全旋转一圈（360度）*/
        }
    }


</style>
</html>
